<template>
  <div class="bar-chart">
    <div class="bar-table">
      <table>
        <thead>
          <tr>
            <th>钢种</th>
            <th>1#轧机</th>
            <th>2#轧机</th>
            <th>3#轧机</th>
            <th>4#轧机</th>
            <th>5#轧机</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>#205</td>
            <td>30</td>
            <td>30</td>
            <td>30</td>
            <td>30</td>
            <td>30</td>
          </tr>
          <tr>
            <td>#205</td>
            <td>30</td>
            <td>30</td>
            <td>30</td>
            <td>30</td>
            <td>30</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts/core'
import { BarChart as EBarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  EBarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer
])

const props = defineProps<{
  data: {
    x: string[],
    series: { name: string, data: number[], color?: string }[]
  },
  title?: string
}>()

const chartRef = ref<HTMLDivElement | null>(null)
let chartInstance: echarts.ECharts | null = null

const renderChart = () => {
  if (!chartRef.value) return
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value, undefined, { renderer: 'canvas' })
  }
  // 安全处理
  const x = props.data?.x || []
  const series = props.data?.series || []
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: props.title || '',
      left: 'center',
      top: 10,
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: '#2196f3',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: props.data.series.map(s => s.name),
      top: 1,
      right:20,
      textStyle: { color: '#b0c9e0' }
    },
    grid: {
      left: '8%',
      right: '8%',
      top: 30,
      bottom: 20
    },
    xAxis: {
      type: 'category',
      data: x,
      axisLine: { lineStyle: { color: '#4e6e8e' } },
      axisLabel: { color: '#b0c9e0' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#4e6e8e' } },
      splitLine: { lineStyle: { color: '#23344a' } },
      axisLabel: { color: '#b0c9e0' }
    },
    series: series.map(s => ({
      name: s.name,
      type: 'bar',
      data: s.data,
      barWidth: 18,
      itemStyle: {
        color: s.color || undefined,
        borderRadius: [4, 4, 0, 0]
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#00eaff'
        }
      }
    }))
  }
  chartInstance.setOption(option)
}

onMounted(() => {
  nextTick(renderChart)
})

watch(() => props.data, renderChart, { deep: true })
</script>

<style scoped>
.bar-chart {
  width: 100%;
  height: 260px;
  background: #14233c;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}
.bar-table {
  position: relative;
  margin-bottom: 6px;
}
.bar-table table {
  width: 100%;
  border-collapse: collapse;
  background: #1a2b47;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  font-size: 13px;
}
.bar-table th, .bar-table td {
  border: 1px solid #23344a;
  color: #fff;
  text-align: center;
  padding: 4px 0;
}
.bar-table th {
  background: #184a8c;
  font-weight: bold;
  font-size: 13px;
  border-bottom: 1.5px solid #2196f3;
}
.bar-table .th-title {
  background: #184a8c;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  min-width: 120px;
  position: relative;
}
.table-title {
  display: block;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 2px;
}
.table-subtitle {
  display: block;
  color: #1ecfff;
  font-size: 13px;
  font-weight: normal;
}
.bar-table .table-badge {
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  background: #e23b6d;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(226,59,109,0.15);
  z-index: 2;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>
